<template>
  <div class="notfound">
    <!-- elementPlus中组件 -->
    <el-result icon="warning" title="404提示" sub-title="你找的页面走丢了~">
      <template #extra>
        <!-- 编程式路由导航，在模版中可以使用$router访问路由，使用$router.push(...)进行路由跳转 -->
        <el-button ntype="primary" @click="$router.push('/')">返回首页</el-button>
      </template>
    </el-result>
  </div>
</template>

<style scoped>
.notfound {
  /* 伸缩盒模型 */
  display: flex;
  /* 伸缩容器的高度充满整个视口 */
  height: 100vh;
  /* 伸缩项目水平居中排列 */
  justify-content: center;
}
</style>
